<template>
    <div class="system-role-container layout-padding">
      <div class="system-role-padding layout-padding-auto layout-padding-view">
        <div class="m-header">
          <div class="pro-name">
            <el-input
              clearable
              size="small"
              placeholder="请输入分类名称关键字"
              v-model="proName"
              :suffix-icon="Search"
            />
          </div>

          <div style="display: flex;align-items: center;">
            <el-button
              size="small"
              @click='exportExcel()'
              :icon="Upload"
              type="success"
              >导出
              </el-button>
            <el-button
              size="small"
              @click="newPerson"
              :icon="CirclePlus"
              type="primary"
              >新增优化设计方案
              </el-button>
          </div>
        </div>
  
        <div class="table_content">
          <el-table
             @selection-change="handleSelection"
            ref="table_s_exp"
            :height="activeHeight"
            style="width: 100%"
            :header-cell-style="{ background: '#fafbfc', color: '#333333' }"
            :data="tableDataPro"
          >
          <el-table-column
              
              
              type="selection"
              width="40"
            
              align="center"
            />
            <el-table-column
              
              
              type="index"
              width="70"
              label="序号"
              align="center"
            />
            <el-table-column
            width="500"
            
              show-overflow-tooltip
              label="优化分类"
                align="left"
              prop="optimal_classification"
            ></el-table-column>

            <el-table-column
                 width="300"
              show-overflow-tooltip
              label="装置分类"
              prop="unit_classification"
            ></el-table-column>
         

            <el-table-column
                width="110"
             show-overflow-tooltip
             label="创建人"
             prop="create_user"
           ></el-table-column>



            <el-table-column
              width="180"
             show-overflow-tooltip
             label="创建时间"
             prop="create_time"
           ></el-table-column>


           <el-table-column
               width="110"
             show-overflow-tooltip
             label="修改人"
             prop="modify_user"
           ></el-table-column>



            <el-table-column
              width="180"
             show-overflow-tooltip
             label="修改时间"
             prop="modify_time"
           ></el-table-column>
          

        <el-table-column fixed="right" label="操作" align="center">
        <template #default="{ row }">
          
          <el-button
           link
            type="primary"
            size="small"
            @click="editTable(row)"
            >编辑</el-button
          >

          <el-popconfirm
            placement="left"
            @confirm="deleteRow(row)"
            title="确认删除?"
          >
            <template #reference>
              <el-button link type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
          
          </el-table>
        </div>
      </div>
  
     
      <el-dialog
      @close="closeFrom(RefEdit)"
      title="编辑人员信息"
      v-model="editDio"
      width="35%"
    >
      <el-form
        ref="RefEdit"
        size="small"
        :model="editData"
        :rules="RulesEdit"
        label-width="100px"
      >
      <el-form-item class="my_item" label="优化分类" prop="optimal_classification">
            <el-input
            resize="none"
             :rows="2"
              type="textarea"
            size="small"
           v-model="editData.optimal_classification"
            placeholder="请输入优化分类"
          />
        </el-form-item>
        <el-form-item class="my_item" label="装置分类" prop="unit_classification">
            <el-input
            resize="none"
             :rows="2"
              type="textarea"
            size="small"
           v-model="editData.unit_classification"
            placeholder="请输入装置分类"
          />
        </el-form-item>
        <el-form-item class="my_item" label="当前设计习惯和常规做法" prop="design_habits_practices">
          <el-input
          resize="none"
             :rows="5"
              type="textarea"
            size="small"
         v-model="editData.design_habits_practices"
            placeholder="请输入"
          />
        </el-form-item>


        <el-form-item class="my_item" label="建议优化措施" prop="improvement_measure">
          <el-input
          resize="none"
             :rows="5"
              type="textarea"
            size="small"
         v-model="editData.improvement_measure"
            placeholder="请输入"
          />
        </el-form-item>


        <el-form-item style="position: relative;" class="my_item" label="附图附表" prop="attached_schedule">
          <el-input
          v-if='fileBase64Str.length == 0'
          resize="none"
             :rows="5"
              type="textarea"
            size="small"
         v-model="editData.attached_schedule"
            placeholder="请输入"
          />

          <div v-for="(item,index) in fileBase64Str" :key='index' style="margin-right: 
          10px;position: relative;">
          <el-icon @click='del_item_change(item)' size="20" color="#999" style="position:absolute;top:5px;right:5px;z-index: 99;"><Close /></el-icon>
            <el-image
      style="width: 100px; height: 100px"
      :src="item"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
          :preview-src-list="[item]"
      :initial-index="4"
      fit="cover"
    />
            
          </div>
          <div   v-if='fileBase64Str.length !== 0'>
            <el-image
             @click='clickUpLoad_change'
      style="width: 100px; height: 100px"
      src=""
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      
      fit="cover"
    />
          </div>


          <div style="position: absolute; right: 35px; bottom: 2px"
                >
                  <el-popover
                   v-if='fileBase64Str.length == 0'
                    placement="top-start"
                    :teleported="false"
                    :width="300"
                    trigger="hover"
                  >
                    <div style="font-size: 14px;font-weight: bolder;">
                        上传图片 <br/>
                        (只能上传.png .jpg .jpeg .bmp 格式文件)
                    </div>
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        margin-top: 10px;
                      "
                    >
                    
                    </div>
                    <template #reference>
                      <el-icon
                          v-if='fileBase64Str.length == 0'
                        @click='clickUpLoad'
                        size="20"
                        ><PictureFilled
                      /></el-icon>
                    </template>
                  </el-popover>
                </div>

        </el-form-item>

        <el-form-item class="my_item" label="其他说明" prop="note">
          <el-input
          resize="none"
             :rows="5"
              type="textarea"
            size="small"
         v-model="editData.note"
            placeholder="请输入"
          />
        </el-form-item>
      


        <el-form-item>
            <el-upload
                        :icon="Download"
                        class="upload-demo"
                        action="#"
                        :show-file-list="false"
                        :http-request="uploadTable_change"
                        multiple
                      >
                        <el-button style="display:none" class="btn_upload btn_upload_change" size="small" type="success"
                          >上传文件</el-button
                        >
                      </el-upload>
          <div style="width: 100%; display: flex; flex-direction: row-reverse">
            <el-button @click="editDio = false">取 消</el-button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-button
              type="primary"
              @click="handleCopyEquipEdit(RefEdit)"
              >确 定</el-button
            >
          </div>
        </el-form-item>
 
      </el-form>
    </el-dialog>

    
    <el-dialog
      @close="addcCloseFrom(RefAdd)"
      title="新增优化设计方案"
      v-model="addDio"
      width="35%"
    >
      <el-form
        ref="RefAdd"
        size="small"
        :model="addData"
        :rules="RulesEdit"
        label-width="100px"
      >
    
        <el-form-item class="my_item" label="优化分类" prop="optimal_classification">
            <el-input
            resize="none"
             :rows="2"
              type="textarea"
            size="small"
           v-model="addData.optimal_classification"
            placeholder="请输入优化分类"
          />
        </el-form-item>
        <el-form-item class="my_item" label="装置分类" prop="unit_classification">
            <el-input
            resize="none"
             :rows="2"
              type="textarea"
            size="small"
           v-model="addData.unit_classification"
            placeholder="请输入装置分类"
          />
        </el-form-item>
        <el-form-item class="my_item" label="当前设计习惯和常规做法" prop="design_habits_practices">
          <el-input
          resize="none"
             :rows="5"
              type="textarea"
            size="small"
         v-model="addData.design_habits_practices"
            placeholder="请输入"
          />
        </el-form-item>


        <el-form-item class="my_item" label="建议优化措施" prop="improvement_measure">
          <el-input
          resize="none"
             :rows="5"
              type="textarea"
            size="small"
         v-model="addData.improvement_measure"
            placeholder="请输入"
          />
        </el-form-item>


        <el-form-item style="position: relative;" class="my_item" label="附图附表" prop="attached_schedule">
          <el-input
          v-if='fileBase64Str.length == 0'
          resize="none"
             :rows="5"
              type="textarea"
            size="small"
         v-model="addData.attached_schedule"
            placeholder="请输入"
          />

          <div v-for="(item,index) in fileBase64Str" :key='index' style="margin-right: 
          10px;position: relative;">
          <el-icon size="20" @click='del_item(item)' style="position:absolute;top:5px;right:5px;z-index: 98;color: #999;"><Close /></el-icon>
            <el-image
      style="width: 100px; height: 100px"
      :src="item"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
          :preview-src-list="[item]"
      :initial-index="4"
      fit="cover"
    />
            
          </div>
          <div   v-if='fileBase64Str.length !== 0'>
            <el-image
             @click='clickUpLoad'
      style="width: 100px; height: 100px"
      src=""
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      
      fit="cover"
    />
          </div>


          <div style="position: absolute; right: 35px; bottom: 2px"
                >
                  <el-popover
                   v-if='fileBase64Str.length == 0'
                    placement="top-start"
                    :teleported="false"
                    :width="300"
                    trigger="hover"
                  >
                    <div style="font-size: 14px;font-weight: bolder;">
                        上传图片 <br/>
                        (只能上传.png .jpg .jpeg .bmp 格式文件)
                    </div>
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        margin-top: 10px;
                      "
                    >
                    
                    </div>
                    <template #reference>
                      <el-icon
                          v-if='fileBase64Str.length == 0'
                        @click='clickUpLoad'
                        size="20"
                        ><PictureFilled
                      /></el-icon>
                    </template>
                  </el-popover>
                </div>

        </el-form-item>

        <el-form-item class="my_item" label="其他说明" prop="note">
          <el-input
          resize="none"
             :rows="5"
              type="textarea"
            size="small"
         v-model="addData.note"
            placeholder="请输入"
          />
        </el-form-item>
      


        <el-form-item>
            <el-upload
                        :icon="Download"
                        class="upload-demo"
                        action="#"
                        :show-file-list="false"
                        :http-request="uploadTable"
                        multiple
                      >
                        <el-button style="display:none" class="btn_upload" size="small" type="success"
                          >上传文件</el-button
                        >
                      </el-upload>
          <div style="width: 100%; display: flex; flex-direction: row-reverse">
            <el-button @click="addDio = false">取 消</el-button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-button
          
              type="primary"
              @click="handleCopyAdd(RefAdd)"
              >确 定</el-button
            >
          </div>
        </el-form-item>
 
      </el-form>
    </el-dialog>




    </div>

  </template>
    
    <script setup name="systemRole">
    import JSZipUtils from "jszip-utils";
import docxtemplater from "docxtemplater";
import { saveAs } from "file-saver";
import JSZip from "pizzip";
import ImageModule from 'docxtemplater-image-module-free'
  import { onMounted, ref, watch } from "vue";
  import { ElMessageBox, ElMessage } from "element-plus";
  import {
    Close,
    Search,
    PictureFilled,
   
    CirclePlus,
    Upload,
    Download,
    Delete,
    Filter,
    Warning
  } from "@element-plus/icons-vue";
  import { useProjectStore } from "../../stores/project";
  import { storeToRefs } from "pinia";
  import {
    DeleteDesignOptimizationScheme,
    GetDesignOptimizationSchemes,
    AddUpdateDesignOptimizationScheme,
   
  } from "../../api/dept";
  import PinYinMatch from "pinyin-match";
  let store = useProjectStore();
  
  let list_filtered = ref([]);
  
  
  let { projectInfo } = storeToRefs(store);
  
  let proName = ref("");
  let sex_ = ref([])
  watch(proName, async () => {
    if (proName.value) {
      let res = await GetDesignOptimizationSchemes();
     
      let data = JSON.parse(JSON.stringify(res));
      tableDataPro.value = data
        .filter(
          (v) =>
            v.optimal_classification.includes(proName.value)
        )
       
    } else {
        getProTable(
        {},
      );
    }
  });


  let clickUpLoad = () => {
    document.querySelector('.btn_upload').click()
}


let clickUpLoad_change = () => {
  document.querySelector('.btn_upload_change').click()
}

let fileArr = ref([])
let fileBase64Str = ref([])
let uploadTable = (file) => {
    fileArr.value.push(file)
}


let fileArrChange = ref([])
let uploadTable_change = (file) => {
  
  fileArrChange.value.push(file)

 
}




let del_item = (item) => {
    fileBase64Str.value  = fileBase64Str.value.filter(v=>!(v == item))
}

let del_item_change = (item) => {

    if(fileBase64Str.value.length == 1){
        editData.value.attached_schedule = ''
    }
    fileBase64Str.value  = fileBase64Str.value.filter(v=>!(v == item))
}


watch(fileArr, () => {
  fileBase64Str.value = []
    fileArr.value.forEach(v=>{
        let reader = new FileReader();
      reader.readAsDataURL(v.file);
      reader.onloadend = function(){
        // 将文件（file）转换成base64字符串
       fileBase64Str.value.push(reader.result)
     
      }
     
    })


    
},{deep:true})



watch(fileArrChange,()=>{

fileArrChange.value.forEach((v,i)=>{
      let reader = new FileReader();
    reader.readAsDataURL(v.file);
    reader.onloadend = function(){
      // 将文件（file）转换成base64字符串
   
     fileBase64Str.value.push(reader.result)
     if(i === fileArrChange.value.length - 1){
      fileArrChange.value = []
     }
  
    }
   
  })

  

},{deep:true})


  
  let matchProfessional = (searchContent) => {
    if (searchContent) {
      let result = [];
      professional_leader_data_options.value.forEach((item) => {
        // matchResult 的值为 true/false
        let matchResult = PinYinMatch.match(item.label, searchContent);
        if (matchResult) {
          result.push(item);
        }
      });
   
      professional_leader_data_options_PY.value = result;
    } else {
      professional_leader_data_options_PY.value = professional_leader_data_options.value;
    }
  };

  



  let matchTeamLeader = (searchContent) => {
    if (searchContent) {
      let result = [];
      team_leader_options.value.forEach((item) => {
        // matchResult 的值为 true/false
        let matchResult = PinYinMatch.match(item.label, searchContent);
        if (matchResult) {
          result.push(item);
        }
      });
  
      team_leader_options_PY.value = result;
    } else {
      team_leader_options_PY.value = team_leader_options.value;
    }
  };

   let RefEdit = ref(null)
  let  closeFrom = () => {
    fileBase64Str.value = []
    RefEdit.value.resetFields();
  }

  let handleCopyEquipEdit = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
     
        if(fileBase64Str.value.length == 0){
              // 保存数据
      await AddUpdateDesignOptimizationScheme({
        ...editData.value,
         modify_user:JSON.parse(localStorage.getItem("userMessage")).user_name,
      });
         }else{

            let imgBase64 =  fileBase64Str.value.join('||')
            await AddUpdateDesignOptimizationScheme({
        ...editData.value,
        attached_schedule:imgBase64,
        
        modify_user:JSON.parse(localStorage.getItem("userMessage")).user_name,
      });
            
         }

         fileBase64Str.value = []
         fileArr.value = []
      ElMessage({
        message: "修改成功",
        type: "success",
      });
      editDio.value = false;
      getProTable(
        {},
        
       
      );
    }
  });
};



let exportExcel = () => {

  let obj = {
    table:exportData.value.map((v,i)=>{
      return{
        index: i + +1,
        optimal_classification:v.optimal_classification,
        unit_classification:v.unit_classification,
        design_habits_practices:v.design_habits_practices,
        improvement_measure:v.improvement_measure,
        hasImage:(v.attached_schedule.includes('base64'))? false: true,
        attached_schedule_str:(!(v.attached_schedule.includes('base64'))?v.attached_schedule : null),
        attached_schedule_img:((v.attached_schedule.includes('base64'))? (
          v.attached_schedule.split('||').map(v=>{
             return {
               imgUrl:v
             }
           })
        ): null),
        note:v.note
      } 
    })
  }


  exportWordDocx({name:'设备专业设计优化方案库',data:obj})
}


let exportWordDocx  = ({name, data : wordData}) => {
   
   const url = `/${name}.docx`;
   JSZipUtils.getBinaryContent(url,(err, data)=>{
     if (err) {
     ElMessage.error("导出报告出错");
     console.log("err:", err);
     return;
   }
   let zip = new JSZip(data);
   const Docxtemplater = docxtemplater;
   const imageOptions = {
     centered: false,
     getImage(tagValue, tagName) {
       return new Promise(function (resolve, reject) {
         JSZipUtils.getBinaryContent(tagValue, function (error, content) {
           if (error) {
             return reject(error);
           }
           return resolve(content);
         });
       });
     },
     getSize(img, tagValue, tagName) {
       // 非固定大小（这里是设置宽度最大为500px的图片）
       return new Promise(function (resolve, reject) {
         let image = new Image();
         image.src = tagValue;
         let imgWidth, imgHeight;
         image.onload = function () {
          
          imgWidth = 110
           imgHeight = (image.height * imgWidth )  / image.width;
          
           resolve([imgWidth, imgHeight]);
         };
         image.onerror = function (e) {
           console.log("img, tagValue, tagName : ", img, tagValue, tagName);
           reject(e);
         };
       });
     },
   };


   const nullGetter = (part, scopeManager) => {
     if (!part.module) {
       return "";
     }
   };
   let doc = new Docxtemplater(zip, {linebreaks: true,  nullGetter: nullGetter, modules: [new ImageModule(imageOptions)] });
  
   doc.resolveData({...wordData}).then(()=>{
     doc.render();
     let out = doc.getZip().generate({
       type: "blob",
       MimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
     });
     saveAs(out, `${name}.docx`);
   })
 })
 }





let handleCopyAdd = (formEl) => {
    if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
        
         if(fileBase64Str.value.length == 0){
              // 保存数据
      await AddUpdateDesignOptimizationScheme({
        ...addData.value,
        create_user:JSON.parse(localStorage.getItem("userMessage")).user_name,
        modify_user:JSON.parse(localStorage.getItem("userMessage")).user_name,
      });
         }else{

            let imgBase64 =  fileBase64Str.value.join('||')
            await AddUpdateDesignOptimizationScheme({
        ...addData.value,
        attached_schedule:imgBase64,
        create_user:JSON.parse(localStorage.getItem("userMessage")).user_name,
        modify_user:JSON.parse(localStorage.getItem("userMessage")).user_name,
      });
            
         }
    
         fileBase64Str.value = []
         fileArr.value = []
      ElMessage({
        message: "新增成功",
        type: "success",
      });
      addDio.value = false;
      getProTable(
        {},
        
       
      );
    }
  });


}

let RefAdd =ref(null)
let addDio = ref(false)
let addData = ref({})
let editDio = ref(false)
let editData = ref({})
let RulesEdit = ref({
    optimal_classification: [{ required: true, message: '请输入', trigger: 'blur' }],
    unit_classification: [{ required: true, message: '请输入', trigger: 'blur' }],
    design_habits_practices: [{ required: false, message: '请输入', trigger: 'blur' }], 
    improvement_measure: [{ required: false, message: '请输入', trigger: 'blur' }],
    attached_schedule: [{ required: false, message: '请输入', trigger: 'blur' }],
    note: [{ required: false, message: '请输入', trigger: 'blur' }], 
})
  let editTable = (data) => {
    if(data.attached_schedule.includes('base64')){
       fileBase64Str.value = data.attached_schedule.split('||')
    }else{
        fileBase64Str.value = []
    }
    editData.value = {...data}

    editDio.value = true


  }



  let deleteRow = async(data) => {
    await DeleteDesignOptimizationScheme({id:data.id})
    getProTable(
        {},
      );
   ElMessage.success('删除成功')

  }


let exportData = ref([])

  let handleSelection = (val) => {
    exportData.value = val
  }


  let addcCloseFrom = () => {
   
    RefAdd.value.resetFields()
  }

  let newPerson = () => {
    addDio.value = true
  }


  let proj_name_data = ref([])
  let proj_name_data_options = ref([])
  let professional_leader_data = ref([])
  let professional_leader_data_options = ref([])
  let professional_leader_data_options_PY = ref([])
  let team_leader_data = ref([])
  let team_leader_options = ref([])
  let team_leader_options_PY  = ref([])
  
  let work_major_ = ref([])
  let educational_ = ref([])
  let professional_post_ = ref([])
  let design_post_= ref([])
  let qualification_ =ref([])

  let calculateAge = (birthday) => {
  // 创建一个日期对象，表示出生日期
  const birthDate = new Date(birthday);

  // 创建一个日期对象，表示当前日期
  const today = new Date();

  // 计算年份差
  let age = today.getFullYear() - birthDate.getFullYear();

  // 如果生日还没到，年龄减1
  if (today.getMonth() < birthDate.getMonth() || 
      (today.getMonth() === birthDate.getMonth() && today.getDate() < birthDate.getDate())) {
    age--;
  }

  return age;
}

  let getProTable = async (data,sex=[],work_major=[],educational=[],professional_post=[],design_post=[],qualification=[]) => {
    let res = await GetDesignOptimizationSchemes(data);

   

    let ORGdata = JSON.parse(JSON.stringify(res));
    const filters = {
        sex, 
        work_major,
        educational,
        professional_post,
       design_post,
       qualification
    };
  
    
    tableDataPro.value = multiFilter(JSON.parse(JSON.stringify(ORGdata)), filters)
  
  };
  
  function multiFilter(array, filters) {
    const filterKeys = Object.keys(filters);
   
    return array.filter((item) => {
      return filterKeys.every((key) => {
 if (!filters[key].length) return true;
        return !!~filters[key].indexOf(item[key]);
      });
    });
  }
  
  let getOptionsData = (data, str) => {
    return [...new Set(data.map((v) => v[str]))]
      .filter((v) => {
        if (v) {
          return v;
        }
      })
      .map((v) => {
        return {
          value: v,
          label: v,
        };
      });
  };
  
  
//   watch([sex_,educational_,professional_post_,design_post_,qualification_,work_major_],()=>{
//     getProTable(
//         {},
//          sex_.value,
//          work_major_.value,
//          educational_.value,
//          professional_post_.value,
//          design_post_.value,
//          qualification_.value,
       


//       );
//   })
  
  
  let personOptions = ref([]);
  
  
  
  
  let tableDataPro = ref([]);
  
  
  

  
  
  
  watch(
    projectInfo,
    () => {
      if (projectInfo.value && Object.keys(projectInfo.value).length > 0) {
        
        getProTable(
        {},
         sex_.value,
         work_major_.value,
         educational_.value,
         professional_post_.value,
         design_post_.value,
         qualification_.value,
       


      );
      }
    },
    { immediate: true }
  );
  
  
  
  
  let activeHeight = ref(0);
  
  
  let userOptionsleader = ref([]);
  let optionsNewteam_leader = ref([]);
  
  
  // 页面加载时
  onMounted(() => {
    activeHeight.value =
      document.querySelector(".system-role-padding").clientHeight - 80;
    window.addEventListener("resize", () => {
      activeHeight.value =
        document.querySelector(".system-role-padding").clientHeight - 80;
    });
  });
  </script>
    
    <style scoped lang="scss">
  .m-header {
    display: flex;
    align-items: center;
  }
  .m-header .pro-name {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .m-header .el-input {
    width: 300px;
  }
  .m-header .el-button {
    margin-right: 10px;
  }
  
  .system-role-container {
    .system-role-padding {
      padding: 15px;
      .el-table {
        flex: 1;
      }
    }
  }
  .button_footer {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
  }
  .table_content {
    margin-top: 20px;
  }
  
  ::v-deep(.el-table--large .el-table__cell) {
    padding: 6px 0;
  }
  
  .table_box {
    padding: 20px 50px;
  }
  
  .button_poastion_flex_iem {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
  }
  
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  
  .el-tabs--right .el-tabs__content,
  .el-tabs--left .el-tabs__content {
    height: 100%;
  }
  
  .backgroun_border {
    // 	::v-deep .el-tabs__header {
    //     margin-top: 39px;
    //   }
  }
  
  ::v-deep(.el-tabs__item::after) {
    position: absolute;
    content: " ";
    top: 0;
    width: 2px;
    height: 100%;
    background: #eee;
    right: 0;
  }
  
  
  .active {
    color: rgb(24, 144, 255);
  }
  
  .icone {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  ::v-deep(.cell){
    // display: flex;
    // align-items: center;
  }

  </style>
    